<template>
  <div class="legend_container">
    <div
      style="flex: 1;overflow-x: hidden;white-space: nowrap;text-align: left;transition: all 0.6s"
      ref="legend"
      id="legend">
      <div
        v-for="item in data"
        :key="item.key"
        @click.stop="itemClick(item)"
        :ref="'legend_item_'+`${item.key}`"
        style="display: inline-block;margin-left: 8px">
        <div
          :style="{'border-radius':item.shapeSize+'px','display':'inline-block','width': item.shapeSize+'px','height': item.shapeSize+'px','backgroundColor': item.selected ? item.selectedColor : item.unSelectColor}"></div>
        <span :style="{'margin-left': '6px','color':item.selected ? item.selectedColor : item.unSelectColor}">{{
          item.name
        }}</span>
      </div>
    </div>
    <div v-if="pagination" style="margin-left: 10px;margin-right: 12px">
      <a
        @click.stop="sub"
        class="triangle_border_left"
        :class="currentPage <= 1?'disableLeftButton':'pageButton'"></a>
      <span class="pageText">{{ pageText }}</span>
      <a
        @click.stop="add"
        class="triangle_border_right"
        :class="currentPage>itemsWH.length?'disableRightButton':'pageButton'"></a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Legend',
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      pageText: '',
      currentPage: 0,
      totalPage: 0,
      pagination: true,
      itemsWH: []
    }
  },
  watch: {
    currentPage (newValue, oldValue) {
      this.pageText = newValue + '/' + this.totalPage
    }
  },

  beforeDestroy () {
    this.itemsWH = undefined
    this.currentPage = 0
    this.totalPage = 0
    window.removeEventListener('resize', this.resizeChange)
  },
  methods: {
    resizeChange () {
      this.panAnimation()
      this.pageText = this.currentPage + '/' + this.totalPage
    },
    sub () {
      if (this.currentPage > 1) {
        this.currentPage -= 1
        this.panAnimation()
      }
    },
    itemClick (item) {
      item.selected = !item.selected
      this.$emit('onItemChick', item)
    },
    panAnimation () {
      this.getLegendLayout()
      let left = 0
      this.itemsWH.slice(0, this.currentPage - 1).forEach((it) => {
        left += it.width
      })
      const container = document.getElementById('legend')
      container.style.marginLeft = '-' + left + 'px'
    },
    getContainerWidth () {
      const container = document.getElementById('legend')
      const containerStyle = window.getComputedStyle(container)
      const containerWidth = parseInt(containerStyle.width)
      return containerWidth + parseInt(containerStyle.marginLeft)
    },
    add () {
      if (this.currentPage < this.totalPage) {
        this.currentPage += 1
        this.panAnimation()
      }
    },
    async getLegendLayout () {
      await this.$nextTick()
      if (!this.$refs.legend || this.$el.parentNode.clientWidth <= 0) return
      let maxLegendWidth = this.getContainerWidth()
      let itemsWidth = 0
      const items = []
      let itemsIdx = 0
      const paginationWidth = this.$refs.pagination ? this.$refs.pagination.clientWidth : 0
      const allItemsWidth = this.data.reduce((total, item) => {
        return this.$refs['legend_item_' + item.key][0].offsetWidth + total
      }, 0)
      if (allItemsWidth > maxLegendWidth) {
        maxLegendWidth -= paginationWidth
      }
      this.data.forEach(item => {
        const itemWidth = this.$refs['legend_item_' + item.key][0].offsetWidth
        itemsWidth += itemWidth
        if (itemsWidth > maxLegendWidth) {
          this.itemsWH[itemsIdx] = this.itemsWH[itemsIdx] || {}
          this.itemsWH[itemsIdx].width = itemsWidth - itemWidth
          itemsWidth = itemWidth
          itemsIdx += 1
        }
        items[itemsIdx] = items[itemsIdx] || []
        items[itemsIdx].push(item)
      })
      if (this.legendWidth > maxLegendWidth) {
        this.legendWidth = maxLegendWidth
      }
      if (this.currentPage < 1) {
        this.currentPage = 1
      }
      this.totalPage = items.length
      this.items = items
      this.pagination = items.length > 1
      const container = document.getElementById('legend')
      container.style.marginRight = this.pagination ? '0px' : '12px'
    }
  },
  mounted () {
    this.getLegendLayout()
    window.addEventListener('resize', this.resizeChange)
  }
}
</script>

<style scoped>
.legend_container {
  display: flex;
}

.pageButton {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

.disableLeftButton {
  display: inline-block;
  vertical-align: middle;
  border-color: transparent #999 transparent transparent !important;
  cursor: not-allowed !important;
}

.disableRightButton {
  display: inline-block;
  vertical-align: middle;
  border-color: transparent transparent transparent #999 !important;
  cursor: not-allowed !important;
}
.pageText {
  vertical-align: middle;
  font-size: 14px;
  margin: 0 5px;
}

/*向左*/

.triangle_border_left {
  width: 0;
  height: 0;
  border-width: 6px 12px 6px 0;
  border-style: solid;
  border-color: transparent rgba(47, 69, 84, 1) transparent transparent;
}

/*向右*/

.triangle_border_right {
  width: 0;
  height: 0;
  border-width: 6px 0 6px 12px;
  border-style: solid;
  border-color: transparent transparent transparent rgba(47, 69, 84, 1);
}
</style>
